import React, { useState } from 'react';
import styles from './addexam.less';
import { Form, Select, Button, DatePicker, Space,Input } from 'antd';
import { useDispatch, useSelector, ExamModelState } from 'umi';
import { useEffect } from 'react';
import '../../../../src/global.css';

let Addexam: React.FC = function () {
  const { Option } = Select;
  let dispatch = useDispatch();
  //获取所有的考试类型
  useEffect(() => {
    dispatch({
      type: 'exam/getExamtype',
    });
  }, []);
  //获取所有的课程
  useEffect(() => {
    dispatch({
      type: 'exam/getExamsubject',
    });
  }, []);
  let { listexam, examType, examsubject } = useSelector(
    (model: { exam: ExamModelState }) => model.exam,
  );
  console.log(examType, '111');
  console.log(examsubject, '222');
  
  //获取开始与结束的时间
 let [startTime,setStartTime] = useState(0);
 let [endTime,setEndTime] = useState(0);

  function onChange(value:any, dateString:any) {
    console.log('Selected Time: ', value);
    console.log('Formatted Selected Time: ', dateString);
    dateString= dateString.replace(new RegExp("-","gm"),"/");
    var startDateM = (new Date(dateString)).getTime(); //得到毫秒数
    console.log(startDateM)
    setStartTime(startDateM)
  }
  function onChange2(value:any,dateString:any){
    console.log('Selected Time: ', value);
    console.log('Formatted Selected Time: ', dateString);
    dateString= dateString.replace(new RegExp("-","gm"),"/");
    var endDateM = (new Date(dateString)).getTime(); //得到毫秒数
    console.log(endDateM)
    setEndTime(endDateM)
  }
  
  const onFinish = (values: any) => {
    console.log(values);
    console.log(startTime,2222222)
    console.log(endTime,111111)
    console.log(values)
    let {subject_id, exam_id,title,number} = values
    dispatch({
        type: 'exam/addExamlist',
        payload: {
          subject_id,
          exam_id,
          title,
          number: Number(number),
          start_time:startTime,
          end_time:endTime,
        }
    })
    
  };
  return (
    <div className={styles.title}>
      <div className={styles.addexam}>
        <Form className={styles.Addexam} name="basic" onFinish={onFinish}>
          <div  className={styles.addname}>
          <span className={styles.namespan}>*试卷名称:</span>
            <Form.Item name="title">
            <Input />
          </Form.Item>
          </div>
          <div className={styles.addtypes}>
            <span className={styles.namespan}>*选择考试类型</span>
          <Form.Item name="exam_id">
            
            {examType.length&&<Select style={{ width: 120 }} className={styles.addtype}>
              {examType.map((item: any) => (
                <Option value={item.exam_id} key={item.exam_id}>
                  {item.exam_name}
                </Option>
              ))}
            </Select>}
          </Form.Item>
          </div>
          <div  className={styles.addsubjects}>
            <span className={styles.namespan}>*选择课程</span>
          <Form.Item name="subject_id">
            
            {examsubject&&<Select style={{ width: 120 }} className={styles.addsubject}>
              {examsubject.map((item: any) => (
                <Option value={item.subject_id} key={item.subject_id}>
                  {item.subject_text}
                </Option>
              ))}
            </Select>}
          </Form.Item>
          </div>
          <div  className={styles.addnum}>
          <span className={styles.namespan}>*设置题量:</span>
            <Form.Item name="number">
            <Input />
          </Form.Item>
          </div>
          <Form.Item>
            <span>考试时间</span>
            <Space direction="vertical" size={12}>
            <DatePicker renderExtraFooter={() => 'extra footer'} showTime onChange={onChange} />
            </Space>
          </Form.Item>
          <Form.Item>
            <Space direction="vertical" size={12}>
            <DatePicker renderExtraFooter={() => 'extra footer'} showTime onChange={onChange2}/>
            </Space>
          </Form.Item>
          <Form.Item className={styles.Btns}>
            <Button type="primary" htmlType="submit">
              创建试卷
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};
export default Addexam;
